<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Register</title>
    <style>
        #clickToChange {
            color: #4494ff;
            text-decoration: underline;
        }
    </style>
</head>
<body>

<hr>

<div>
    <form action="/likeyu/registerv1" method="post">
        <table cellpadding="5">
            <tr>
                <th valign="top">注册邮箱:</th>
                <td>
                    <input type="text" name="email"><br>
                    你还可以手机注册
                </td>
            </tr>

            <tr>
                <th>
                    创建密码:
                </th>
                <td>
                    <input type="text" name="password">
                </td>
            </tr>
            <tr>
                <th>真实姓名:</th>
                <td><input type="text" name="idname"></td>
            </tr>

            <tr>
                <th align="right">性别:</th>
                <td>
                    <input type="radio" name="gender">男
                    <input type="radio" name="gender">女
                </td>
            </tr>

            <tr>
                <th align="right">生日:</th>
                <td>
                    <select name="year" id="selectYear" onchange="getDay()">
                    </select>
                    年
                    <select name="month" id="selectMonth" onchange="getDay()">
                    </select>
                    月
                    <select name="day" id="selectDay">
                    </select>
                    日
                </td>
            </tr>

            <tr>
                <th align="right">我正在:</th>
                <td>
                    <input type="checkbox" name="doSomething" value="sleep">睡觉
                    <input type="checkbox" name="doSomething" value="eat">吃饭
                    <input type="checkbox" name="doSomething" value="shit">拉屎
                    <input type="checkbox" name="doSomething" value="class">上课
                    <input type="checkbox" name="doSomething" value="game">游戏
                </td>
            </tr>

            <tr>
                <td>
                    <input type="submit" value="Register">
                </td>
            </tr>

        </table>
    </form>
</div>

<script>
    function initSelect() {
        var selectYearNode = document.getElementById('selectYear');
        for (var i = 2021; i >= 1949; i--) {
            var optionElement = document.createElement('option');
            optionElement.innerText = i;
            selectYearNode.appendChild(optionElement);
        }

        var selectMonthNode = document.getElementById('selectMonth');
        for (var i = 1; i <= 12; i++) {
            var optionElement = document.createElement('option');
            if (i < 10) {
                optionElement.innerText = '0' + i;
            } else {
                optionElement.innerText = i;
            }
            selectMonthNode.appendChild(optionElement);
        }

        printDay(31);

    }

    initSelect();

    // 监控 年+月 改变对应的day
    function getDay() {
        var year = document.getElementById('selectYear').value;
        var month = document.getElementById('selectMonth').value;

        if (month == 4 || month == 6 || month == 9 || month == 11) {
            printDay(30)
        } else if (month == 2) {
            if (year % 400 == 0 || (year % 100 != 0 && year % 4 == 0)) {
                printDay(29)
            } else
                printDay(28)
        } else {
            printDay(31)
        }
        return;
    }

    // 打印日期
    function printDay(dayNumber) {
        var selectDayNode = document.getElementById('selectDay');
        selectDayNode.innerText = '';
        for (var i = 1; i <= dayNumber; i++) {
            var optionElement = document.createElement('option');
            if (i < 10) {
                optionElement.innerText = '0' + i;
            } else {
                optionElement.innerText = i;
            }
            selectDayNode.appendChild(optionElement);
        }
    }
</script>
</body>
</html>